<template>
  <div class="cl6">
        <div class="iHead1">全口径亡人交通事故</div>
        <div class="main">
            <div id="cm1View" ref="cm1View"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['infoData', 'posItem', 'yearItem'],
    data() {
        return {
            cm1View: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.cm1View = this.$echarts.init(this.$refs.cm1View);
            this.chartInit();
        });
    },
    watch: {
        posItem: function (infoData) {
            this.chartInit();
        },
        yearItem: function (infoData) {
            this.chartInit();
        },
    },
    methods: {
        chartInit() {
            let yAxis = [];
            this.infoData[10].map((i, o) => {
                if (i[0] == this.posItem) {
                    yAxis = JSON.parse(i[this.yearItem])
                }
            })
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '3%',
                    right: '5%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                    axisLine: {
                        lineStyle: {
                            color: "#cccccccc",
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#eeeeee55",
                        }
                    },
                    axisLabel: {
                        interval: false,
                        width: 80,
                        align: 'center',
                        color: '#fff',
                    },
                }
                ,
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#eeeeee55",

                        }
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                }
                ,
                series: [
                    {
                        barWidth: '10',
                        type: 'bar',
                        itemStyle: {
                            barBorderRadius: 10,
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#00EDEE' },
                                    { offset: 1, color: '#0065BD' }
                                ]
                            )
                        },
                        data: yAxis
                    }
                ]
            };

            this.cm1View.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.cl6 {
    width: 300px;
    height: 180px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 180px;
        z-index: 1;
        background-image: url('../../assets/denglukuang.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: .4;
    }

    .main {
        position: relative;
        z-index: 2;
        width: 300px;
        color: #fff;

        #cm1View {
            margin-top: -50px;
            width: 300px;
            height: 190px;
        }
    }
}
</style>